<template>
  <div>
    <jc-bar prve-btn @prve="$router.replace({ path: '/huayu' })">
      <v-spacer></v-spacer>
      {{ pageData.biaoTi }}
      <v-spacer></v-spacer>
      <v-btn icon @click="$router.push({ path: '/home' })">
        <v-icon>mdi-home</v-icon>
      </v-btn>
    </jc-bar>
    <v-main>
      <v-container>
        <v-row>
          <v-col :cols="12">
            {{ pageData.type }}
          </v-col>
        </v-row>
        <v-row>
          <v-col :cols="12">
            <v-card>
              <v-img :src="cover" width="100%" height="120px"></v-img>
              <v-card-actions>
                <play-slider
                  :durition="durition"
                  :current-time="currentTime"
                  :value="sliderVal"
                  @start="sliderStart"
                  @end="sliderEnd"
                ></play-slider>
              </v-card-actions>
              <v-card-actions>
                <template v-if="iswx">
                  <wx-open-audio
                    ref="wxad"
                    :src="pageData.dmtUrl.adUrl"
                    :title="pageData.biaoTi"
                    :cover="cover"
                  ></wx-open-audio>
                </template>
                <template v-else>
                  <v-btn icon @click="play" :loading="audioCanplayLoading">
                    <v-icon :size="40">{{ PlayBtn }}</v-icon>
                  </v-btn>
                </template>
                <v-spacer />
                <v-btn icon @click="fangda(pageData.dmtUrl.gepuUrl)">
                  <v-icon :size="40">mdi-magnify-plus-outline</v-icon>
                </v-btn>
              </v-card-actions>
              <v-card-text>
                <img
                  :src="pageData.dmtUrl.gepuUrl"
                  width="100%"
                  height="auto"
                  @error="pageData.dmtUrl.gepuUrl = require('../../../assets/emty.png')"
                  @click="dialogVisable = true"
                />
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
    <v-dialog v-model="dialogVisable" content-class="jc-dialog">
      <img :src="pageData.dmtUrl.gepuUrl" />
    </v-dialog>
  </div>
</template>

<script>
import JcBar from "../../../layout/JcBar";
import PlaySlider from "../../../components/PlaySlider";
// import { fenxiang } from '../../../jcui/wx-api.js';
import { getHyId } from "../../../api/cloudbase-huayu.js";
import { isWeiXin, formatSeconds } from "../../../utils/common";

export default {
  name: "index",
  components: { JcBar, PlaySlider },
  props: {
    id: {
      type: [Number, String],
      required: true,
    },
  },
  data() {
    return {
      dialogVisable: false,
      pageData: {
        _id: "",
        biaoTi: "",
        dmtUrl: {
          adUrl: "",
          gepuUrl: "",
        },
        sort: 0,
        type: "",
      },
      iswx: false,
      _audio: null,
      cover: "https://picsum.photos/id/870/200/150", // 灯塔的图片
      PlayBtn: "mdi-play-circle",
      playBtnIcon: "mdi-play-circle",
      pauseBtnIcon: "mdi-pause-circle",
      sliderVal: 0,
      audioCanplayLoading: true,
      audioDuritionFormat: "00:00:00",
      audioCurrentTimeFormat: "00:00:00",
      durition: 0,
      currentTime: 0,
    };
  },
  computed: {},
  async mounted() {
    this.iswx = isWeiXin();
    this.initAudio();
  },
  async activated() {
    this.init();
  },
  methods: {
    async init() {
      const res = await getHyId(this.id);
      this.pageData = res.data[0] || {
        _id: "20211226ZR",
        biaoTi: "惟义人因信得生",
        dmtUrl: {
          adUrl:
            "https://7367-sgb-8gqmg7kv48722f4e-1306391227.tcb.qcloud.la/sgb/nad/a662817b363a36ed55f9744a18ecbf32.mp3",
          gepuUrl:
            "https://7367-sgb-8gqmg7kv48722f4e-1306391227.tcb.qcloud.la/sgb/nad/a2e91b7aba3d820a832f8718d471c2ba.jpg",
        },
        sort: 99,
        type: "主日信息",
      };
      document.title = this.pageData.biaoTi;
      // fenxiang(this.pageData.biaoTi, `${location.origin}/#${this.$route.fullPath}`, this.$route.meta.icon)
      if (!this._audio) {
        this.initAudio();
      }
      this._audio.src = this.pageData.dmtUrl.adUrl;
    },
    fangda() {
      this.dialogVisable = true;
    },
    audioEvent() {
      this._audio.onpause = () => {
        this.PlayBtn = this.playBtnIcon;
      };
      this._audio.onplay = () => {
        this.PlayBtn = this.pauseBtnIcon;
      };
      this._audio.ontimeupdate = () => {
        this.audioCurrentTimeFormat = formatSeconds(this._audio.currentTime);
        this.currentTime = this._audio.currentTime;
        const v = (this._audio.currentTime / this._audio.duration).toFixed(2) * 100;
        this.sliderVal = v;
      };
      this._audio.onended = () => {
        this.PlayBtn = this.playBtnIcon;
        this.sliderVal = 0;
      };
      this._audio.ondurationchange = () => {
        this.PlayBtn = this.playBtnIcon;
        if (!this._audio.paused) {
          this._audio.pause();
        }
        this.sliderVal = 0;
      };
      this._audio.onerror = () => {
        this.$jcmsg({
          msg: "音频播放错误",
          duration: 3000,
        }).show();
      };
      this._audio.oncanplay = () => {
        this.audioCanplayLoading = false;
        this.audioDuritionFormat = formatSeconds(this._audio.duration);
        this.durition = this._audio.duration;
      };
    },
    initAudio() {
      if (this.iswx) {
        this._audio = this.$refs.wxad;
      } else {
        this._audio = document.createElement("audio");
      }
      this.audioEvent();
    },
    play() {
      if (this._audio.paused) {
        this._audio.play();
      } else {
        this._audio.pause();
      }
    },
    sliderStart(num) {
      this._audio.sliderStartPaused = this._audio.paused;
      this.sliderVal = num;
      if (!this._audio.paused) {
        this._audio.pause();
      }
    },
    sliderEnd(num) {
      console.log("结束", num);
      this.sliderVal = num;
      this._audio.currentTime = this._audio.duration * (num / 100);
      if (!this._audio.sliderStartPaused) {
        this._audio.play();
      }
    },
  },
  watch: {
    id(val) {
      this.id = val;
    },
  },
};
</script>

<style scoped>
::v-deep .jc-dialog {
  box-shadow: none !important;
}
::v-deep .v-input__slot {
  margin-bottom: 0px !important;
}
::v-deep .v-messages {
  min-height: 0px !important;
}
.play-time {
  color: #bdbdbd;
  font-size: 8px;
}
</style>
